<template>
  <div class="rs-input-box">
    <i :class="iconName" class="rs-icon-box"></i>
    <input :style="inputStyle" v-model="inputValue" />
  </div>
</template>

<script>
export default {
  props: {
    /**input输入框的值 */
    value: { type: String, default: '' },
    color:{type:String,default:'#222'},
    /**input输入框的背景颜色 */
    backgroundColor: { type: String, default: '#fff' },
    /**input输入框的边框颜色 */
    borderColor: { type: String, default: '#fff' },
    /**输入框前面的图标名字 */
    iconName: { type: String, default: 'el-icon-school' },
    /**输入框前面的图标大小 */
    iconSize: { type: String, default: '30px' },
    /**输入框前面的图标颜色 */
    iconColor: { type: String, default: 'black' },
    /**输入框的宽度 */
    width: { type: String, default: '120px' },
    /**输入框的高度 */
    height: { type: String, default: '30px' },
    /**是否展示图标 */
    showIcon: { type: Boolean, default: false },
    /**是否展示标签 */
    showTitle: { type: Boolean, default: false },
    /**标签的值 */
    title: { type: String, default: '标题' },
    /**字体是否加粗 */
    fontWeight: { type: String, default: 'normal' },
    /**输入框的大小 */
    size: { type: String, default: 'normal' },
    /** 字体大小 */
    fontSize: { type: String, default: '16px'}
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        console.log(val, 'set')
        // 修改value值
        // this.$emit('updateVal', val)
        this.$bus.$emit('updateTitleBVal', val);
      },
    },
    inputStyle() {
      return {
        width: this.width,
        height: this.height,
        fontWeight: this.fontWeight,
        backgroundColor: this.backgroundColor,
        border: "none",
        color: this.color,
        fontSize: this.fontSize,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.rs-input-box {
  display: flex;
  align-items: center;

  .rs-icon-box {
    width: 30px;
    height:30px;
    font-size: 30px;
    margin-right: 3px;
    margin-left: 5px;
    margin-bottom: 4px;
    margin-top: 5px;
  }

  .label-box {
    width: 40px !important;
  }

  .rs-input {
    // font-weight: v-bind(inputFontWeight);
    // width: v-bind(inputWidth);
    // height: v-bind(inputHeight);
    // background-color: v-bind(bgColor);
    // border-width: 1px;
    // border-color: v-bind(bgColor);
    font-weight: v-bind(fontWeight);
    width: 120px;
    height: 30px;
    background-color: #062743;
    border: none;
    color: #fff;
    font-size: 16px;
    // border-width: 1px;
    // border-color:#fff;
    // border-style: dotted;
  }

  .rs-input:focus {
    background: none;
    outline: none;
    border: 0px;
    border-width: 1px;
    border-color: #fff;
    border-style: dotted;
  }
}
</style>
